<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery多种百叶窗风格切换焦点图插件DEMO演示</title>

<link rel="stylesheet" href="css/shutter.css">

</head>
<body>

<div class="shutter">
  <div class="shutter-img">
    <a href="#" data-shutter-title="Iron Man">
      <img src="images/shutter_1.jpg" alt="#"></a>
    <a href="#" data-shutter-title="Super Man">
      <img src="images/shutter_2.jpg" alt="#"></a>
    <a href="#" data-shutter-title="The Hulk">
      <img src="images/shutter_3.jpg" alt="#"></a>
    <a href="#" data-shutter-title="The your">
      <img src="images/shutter_4.jpg" alt="#"></a>
  </div>
  <ul class="shutter-btn">
    <li class="prev"></li>
    <li class="next"></li>
  </ul>
  <div class="shutter-desc">
    <p>Iron Man</p>
  </div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/velocity.js"></script>
<script src="js/shutter.js"></script>
<script>
$(function () {
  $('.shutter').shutter({
	shutterW: 1000, // 容器宽度
	shutterH: 358, // 容器高度
	isAutoPlay: true, // 是否自动播放
	playInterval: 3000, // 自动播放时间
	curDisplay: 3, // 当前显示页
	fullPage: false // 是否全屏展示
  });
});
</script>

</div>
</body>
</html>